<template>
  <view class="info-container">
    <!-- 基础信息标题 -->
    <view class="section-title">
      <text class="title-text">基础信息</text>
    </view>

    <!-- 表单内容 -->
    <view class="form-section">
      <!-- 姓名 -->
      <view class="form-item"  :class="{ active: !formData.userInfo?.real_name && isSubmit  }">
        <view class="label-box">
		  <text class="label">姓名</text>
          <text class="required">*</text>
		  <text class="fail-label" v-if="!formData.userInfo?.real_name && isSubmit">请填写姓名</text>
        </view>
        <input 
          class="input" 
          type="text" 
          v-model="formData.userInfo.real_name" 
          placeholder="请输入姓名"
          placeholder-style="color: #B5B5B5"
		      @input="nameInputChange"
        />
      </view>

      <!-- 身份证号 -->
      <view class="form-item" :class="{ active: !validateIdCard(formData.userInfo?.idnum) && isSubmit }">
        <view class="label-box">
          <text class="label">身份证号</text>
		  <text class="required">*</text>
		    <text class="fail-label" v-if="!validateIdCard(formData.userInfo?.idnum) && isSubmit">请填写正确的身份证号</text>
        </view>
        <input 
          class="input" 
          type="idcard" 
          v-model="formData.userInfo.idnum" 
          placeholder="请输入身份证号"
          placeholder-style="color: #B5B5B5"
		      @input="idCardInputChange"
        />
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <view class="label-box">
          <text class="label">手机号 (不可修改)</text>
        </view>
        <text class="phone-text">{{ formatPhone(formData.userInfo?.phone) }}</text>
      </view>

      <!-- 性别 -->
      <view class="form-gender-group-item">
        <view class="label-box">
          <text class="label">性别</text>
        </view>
        <view class="gender-group">
          <view 
            class="gender-item" 
            :class="{ active: formData.userInfo?.gender === '1' }"
            @click="formData.userInfo.gender = '1'"
          >
            <text>男</text>
          </view>
          <view 
            class="gender-item" 
            :class="{ active: formData.userInfo?.gender === '2' }"
            @click="formData.userInfo.gender = '2'"
          >
            <text>女</text>
          </view>
          <view 
            class="gender-item" 
            :class="{ active: formData.userInfo?.gender === '0'}"
            @click="formData.userInfo.gender = '0'"
          >
            <text>保密</text>
          </view>
        </view>
      </view>
    </view>

    <view class="button-section">
      <button class="gvr-yellow-button submitbutton"  @click="handleSubmit">提交</button>
    </view>

  </view>
</template>

<script setup>
import { ref,onMounted} from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { userApi } from '@/service/api.js'
import { userStore } from '@/utils/userStore.js'
import { RouterMethods } from '../../utils/router'
import { formatPhone,validateIdCard} from '@/utils/format'
// 用户信息
const formData = ref({
	userInfo: {
		phone:'', //"手机号",
		real_name:'', // 真实姓名
		idnum:'', //二者为null, 代表 用户尚未实名
		gender:'', //性别 0 - 保密  1 - 男, 2 - 女
		main_cert_1:'',
		main_cert_2:'',
		main_cert_3:'',
		main_cert_4:'',
		main_cert_5:''
	},
	images: {
		
	}
})
onMounted(() => {
  console.log('gasstation onMounted')
  initUserInfo()
})

// 页面显示时检查状态
onShow(() => {
  console.log("gasstation onShow")
  initUserInfo()
})
// 初始化用户信息
const initUserInfo = () => {
  const storedInfo = userStore.getUserInfo()
  if (storedInfo) {
    formData.value = storedInfo
  }
}


const isSubmit = ref(false)


const nameInputChange = (e) => {
	isSubmit.value = false 
	console.log(e)
}
const idCardInputChange = (e) => {
	isSubmit.value = false 
	console.log(e)
}


const handleSubmit = async() => {
	isSubmit.value = true
  // 表单验证
  if (!formData.value?.userInfo?.real_name) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return
  }
  if (!validateIdCard(formData.value?.userInfo?.idnum)) {
    uni.showToast({ title: '请输入身份证号', icon: 'none' })
    return
  }
  if (!formData.value?.userInfo?.gender) {
    uni.showToast({ title: '请选择性别', icon: 'none' })
    return
  }
  console.log(formData.value)
  try {
	  let result = await userApi.commitUserInfo(formData.value.userInfo)
	  if (result.code == undefined) {
			console.log(result)
			userStore.saveUserInfo(result)
			uni.showToast({
				title:'提交信息成功',
				icon:'none',
				duration: 1000
			})
			setTimeout(()=>{
				RouterMethods.toChooseOrg()
			},1300)
	  } else {
			throw new Error(result.msg || '提交信息成功失败')
	  }
  } catch (err) {
    uni.showToast({
      title: err.message || '提交信息失败',
      icon: 'none'
    })
  }
}
</script>

<style scoped>
.info-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 0 56rpx;
  padding-bottom: env(safe-area-inset-bottom)
}

.section-title {
  margin-top: 68rpx;
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.title-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.form-section {
  background-color: #FFFFFF;
}

.form-item {
  display: flex;
  flex-direction: column;
  padding-top: 40rpx;
  border-bottom: 2rpx solid #001E32;
}
.form-item.active {
  border-bottom: 2rpx solid #BA0C2F;
}


.label-box {
  display: flex;
  align-items: center;
  margin-bottom: 26rpx;
}
.label {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}
.required {
 font-family: PingFangSC-Medium;
 font-size: 28rpx;
 color: #BA0C2F;
 letter-spacing: 0;
 font-weight: 500;
}

.fail-label {
	font-family: PingFangSC-Medium;
	font-size: 24rpx;
	color: #BA0C2F;
	letter-spacing: 0;
	font-weight: 500;
}

.input {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #001E32;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 13rpx;
}

.phone-text {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #001E32;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 13rpx;
}
.form-gender-group-item {
  display: flex;
  flex-direction: column;
  padding-top: 40rpx;
}
.gender-group {
  display: flex;
  justify-content: space-between;
  width: 516rpx;
}

.gender-item {
  width: 156rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DEDEDE;
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}

.gender-item.active {
  background: #3678BF;
  color: #FFFFFF;
}
.button-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #FFFFFF;
}
.submitbutton {
  border-radius: 0;
}

</style> 